<template>
  <div class="buttonBox">
    <div class="animationBox">
      <!-- 中途办结按钮 -->
      <a-button
        @click="shwoModal('中途办结', 'termination', '请输入中途办结原因（通常用于企业主动要求不办理，或审批下达通知后企业超期未响应。此操作无法还原请确认清楚！）')"
        style="margin-left: 8px"
        v-if="this.$route.params.category != Tp_categoryValue.RZEXAM"
        :loading="loading"
        type="danger"
        >中途办结</a-button
      >
      <!-- 补正延期按钮 -->
      <a-button
        style="margin-left: 8px"
        v-if=btn2Show
        @click="shwoModal('补正延期', 'postponeAppend', '请输入补正延期原因')"
        :loading="loading"
        >补正延期</a-button
      >

      <!-- 状态结束按钮 -->
      <a-button
        style="margin-left: 8px"
        @click="shwoModal( btn3 , 'activeProcess', '请输入' + btn3 + '原因')"
        :loading="loading"
        type="primary"
        >{{ this.btn3Name }}</a-button
      >

      <WFMODAL ref="modalRef" @f_confirm="s_confirm">
        <!-- 延期补正出来时间选择 -->
        <div v-if="funName == 'postponeAppend'" slot="head">
          <a-form-model-item label="延期至" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
            <a-date-picker
              v-model="myClosingdate"
              :disabled-date="disabledDate"
              placeholder="请选择延期日期"
              :allowClear="false"
              @change="deadlineChange"
            />
          </a-form-model-item>
        </div>
      </WFMODAL>
    </div>
  </div>
</template>
<script>
import { outProcess } from '@/api/workflow/wf_MyStartInstance'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { Tp_categoryValue } from '@/enumeration/Tp_category.js'
import { updateClosingdate } from '@/api/workflow/act_hi_procinst_ext.js'
import moment from 'moment'
import { terminationTask } from '@/api/workflow/mf_MyTaskUndo.js'

export default {
  props: ['processinstanceid', 'processdefinitionid', 'taskid', 'stepid', 'formid', 'pattern', 'isBtn2Show', 'btn3Name'],
  data() {
    return {
      funName: undefined, // 组组件模态框当前控制的方法
      myClosingdate: this.$route.params.closingdate || null, // 当前页所选截止日期
      Tp_categoryValue: Tp_categoryValue, // 环节分类标识
      loading: false, // 按钮状态
      currentUser: storage.get(APP_USER), // 登录人信息
      btn3: this.btn3Name, //按钮3的名称，从MyTaskUndoOperation传来参数
      btn2Show: this.isBtn2Show //按钮2是否显示，从MyTaskUndoOperation传来参数
    }
  },
  created() {
  },
  methods: {
    // 子组件模态框确
    s_confirm(funName, remark, otherParams) {
      this[funName](remark, otherParams)
    },
    // 关闭子组件操作模态框
    closeModal() {
      this.$refs.modalRef.f_close()
    },
    // 显示子组件操作模态框
    shwoModal(title, funName, placeholder) {
       this.funName = funName
      this.$refs.modalRef.f_init(title, funName, placeholder)
    },
    // 延期补正确认
    postponeAppend(remark) {
      let body = {
        userid: this.currentUser.userId,
        taskid: this.taskid,
        remark: remark,
      }
      updateClosingdate(this.processinstanceid, this.myClosingdate, body).then((res) => {
        if (res.code == 0) {
          this.$message.success('延期成功')
        }
      }).finally(() => {
        this.closeModal()
      })
    },
    // 终止补正确认
    activeProcess(remark) {
      this.loading = true
      const savem = this.$message.loading('正在执行操作，请稍后...', 0)
      outProcess(
        {
          processinstanceid: this.processinstanceid,
          userid: this.currentUser.userId,
          suspensionState: 2,
        },
        {
          remark: remark,
          handletext: this.btn3
        }
      )
        .then((res) => {
          if (res.code === 0 && res.data.code == 0) {
            this.$message.success('操作成功')
            // 修改流程的状态, 激活成功后显示操作按钮栏, 隐藏
            this.$emit('f_updateState', true)
          } else {
            this.$message.warning(res.data.msg)
          }
        })
        .finally(() => {
          this.closeModal()
          this.loading = false
          setTimeout(savem, 0)
        })
    },
    // 中途办结确认
    termination(remark) {
      let params = {
        handletext: '中途办结', // 操作按钮的处理文字
        userid: this.currentUser.userId,
        taskid: this.taskid,
        deleteReason: remark,
        notRequired: true, // 不校验流程状态
      }
      const savem = this.$message.loading('正在执行操作，请稍后...', 0)
      terminationTask(params)
        .then((res) => {
          if (res.code == 0 && res.data.code == 0) {
            this.$message.success('操作成功!')
            this.$router.go(-1)
          } else {
            this.$message.warning(res.data.msg)
          }
        })
        .finally(() => {
          setTimeout(savem, 0)
        })
    },
    // 补正延期选中回调
    deadlineChange(value) {
      this.myClosingdate = value.format('YYYY-MM-DD')
    },
    // 选补正截止日期禁用今天之前的日期
    disabledDate(current) {
      return current && current < moment().endOf('day')
    },
  },
  components: {
    WFMODAL: () => import('@/views/base/Wf_Modal.vue'),
  },
}
</script>
<style lang="less" scoped>
// --- 按钮 ---
.animationBox {
  overflow: hidden;
  .outCOn {
    width: 0px;
    white-space: nowrap;
    background: #fff;
    // background-color: #fff;
  }
  .outClick {
    display: flex;
    justify-content: flex-end;
    // border: 1px solid red;
    transition: all 0.2s linear;
  }
  .dieClick {
    width: 0px;
    transition: all 0.2s linear;
  }
}

.buttonBox {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  right: 0;
  height: 60px;
  box-shadow: 1px 1px 10px rgba(49, 45, 45, 0.377);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 5%;
  z-index: 9;
}
</style>
